<template>
  <div>
    <a-modal 
      :title="$store.state.language=='zh'?'配置块设备iscsi成功':'Configuring block device iSCSI succeeded'" 
      v-model='visible_dialog' 
      @cancel='handleCancel' 
      width='35%'
      :maskClosable='false'
      v-dragModal
    >
      <div class="ok-img">
        <img src="../../../../../static/images/disk_check/64_f_ic_sure.png" alt="sure_img"/>
      </div>
      <div class="font-color333" v-if="$store.state.language == 'zh'">恭喜，配置块设备 iscsi 成功！</div>
      <div class="font-color333" v-else>Congratulations, configuring block device iSCSI successfully!</div>
      <a-descriptions
        bordered 
        size="small"
      >
        <a-descriptions-item v-for="(item,index) in iscsiDetails" 
            :label="$store.state.language=='zh'?item.title_ch:item.title_en"
            :span="item.span" :key="index">
            <div>{{item.value}}</div>
        </a-descriptions-item>
      </a-descriptions>
      <template slot="footer">
        <a-button key="back" @click="handleCancel">{{$t('Sure')}}</a-button>
        <!--复制配置信息-->
        <a-button key="submit" type="primary" @click="copyFun">{{$t('Copy-config-info')}}</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "ConfigClientOk",
  props: ['visible', 'targetConfigClient'],
  data() {
    return {
      visible_dialog: false,
      iscsiDetails: [
        {title_ch:'iSCSI客户端：', title_en:'iSCSI client:', value:'', span:3 },
        {title_ch:'用户名：', title_en:'Username:', value:'', span:3 },
        {title_ch:'密码:', title_en:'Password:', value:'', span:3 },
      ]
    }
  },
  mounted() {
    this.visible_dialog = this.visible;
    this.iscsiDetails[0].value = this.targetConfigClient.name;
    this.iscsiDetails[1].value = this.targetConfigClient.username;
    this.iscsiDetails[2].value = this.targetConfigClient.password;
  },
  methods: {
    //复制配置信息
    copyFun() {
      //客户端名:...\n用户名:...\n密码:...
      let str = `${this.$t('Client-name')}:${this.targetConfigClient.name}\n${this.$t('Username')}:${this.targetConfigClient.username}\n${this.$t('Password')}:${this.targetConfigClient.password}`
			if(navigator.clipboard && window.isSecureContext) {
				//新方法：
				navigator.clipboard.writeText(str).then(() => {
					/* clipboard successfully set */
					this.$message.success(this.$t('Copy-succeeded'));
				}, () => {
					/* clipboard write failed */
					this.$message.error(this.$t('Copy-failed'));
				});
			}else {
				// 旧方法：
				const textareaDom = document.createElement('textarea');
				document.body.appendChild(textareaDom);
				// textareaDom.setAttribute('value', str);
				textareaDom.value = str;
				textareaDom.focus();
				textareaDom.select();
				if(document.execCommand('copy')) {
					document.execCommand('copy');
					this.$message.success(this.$t('Copy-succeeded'));
				}else {
					this.$message.error(this.$t('Copy-failed'));
				}
				document.body.removeChild(textareaDom);
			}
		},

    //关闭弹窗
    handleCancel() {
      this.$emit('closeConfigClientOk')
    },
  },
}
</script>
<style scoped>
  .ok-img {
    display: flex;
    justify-content: center;
  }
  .font-color333 {
    color: #333;
  }
</style>